<template>
  <div class="innovation-overview-wrapper">
    <div class="top">
      <div class="top-left">
        <div class="top-left-tabs">
          <div class="top-left-tabs-left">
            <div class="top-left-tabs-left-icon"></div>
          </div>
          <div class="top-left-tabs-right">
            <div class="top-left-tabs-right-label">
              专家总数
            </div>
            <div class="top-left-tabs-right-content">
              <div class="top-left-tabs-right-content-num">
                {{ exportTotal }}
              </div>
              人
            </div>
          </div>
        </div>
        <div class="chart top-left-charts">
          <div class="chart-main1">
            <echartDiv :options="optionsZJLX" />
          </div>
          <div class="chart-legend top-left-charts-legend">
            <div
              class="legend-item"
              v-for="(item, index) of legendZJLX"
              :key="index"
            >
              <div class="legend-item-left">
                <div
                  class="legend-item-left-circle"
                  :style="{
                    backgroundColor: legendColorZJLX[index]
                  }"
                ></div>
                <div class="legend-item-left-label">
                  {{ item.type }}
                </div>
              </div>
              <div class="legend-item-right">
                <div class="legend-item-right-num">
                  {{ item.total || 0 }}
                </div>
                人
                <div class="legend-item-right-per">
                  {{
                    item.total === 0
                      ? 0
                      : (
                          (item.total / totalZJLX) *
                          100
                        ).toFixed(2)
                  }}
                </div>
                %
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="top-middle">
        <div class="title">技术类专家各领域占比</div>
        <div class="chart">
          <div class="chart-main">
            <echartDiv :options="optionsJSZJ" />
          </div>
          <div class="chart-legend">
            <div
              class="legend-item"
              v-for="(item, index) of legendJSZJ"
              :key="index"
            >
              <div class="legend-item-left">
                <div
                  class="legend-item-left-circle"
                  :style="{
                    backgroundColor: legendColorJSZJ[index]
                  }"
                ></div>
                <div class="legend-item-left-label">
                  {{ item.type }}
                </div>
              </div>
              <div class="legend-item-right">
                <div class="legend-item-right-num">
                  {{ item.total || 0 }}
                </div>
                人
                <div class="legend-item-right-per">
                  {{
                    item.total === 0
                      ? 0
                      : (
                          (item.total / totalJSZJ) *
                          100
                        ).toFixed(2)
                  }}
                </div>
                %
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="top-right">
        <div class="title">创投类专家各领域占比</div>
        <div class="chart">
          <div class="chart-main">
            <echartDiv :options="optionsCTZJ" />
          </div>
          <div class="chart-legend">
            <div
              class="legend-item"
              v-for="(item, index) of legendCTZJ"
              :key="index"
            >
              <div class="legend-item-left">
                <div
                  class="legend-item-left-circle"
                  :style="{
                    backgroundColor: legendColorCTZJ[index]
                  }"
                ></div>
                <div class="legend-item-left-label">
                  {{ item.type }}
                </div>
              </div>
              <div class="legend-item-right">
                <div class="legend-item-right-num">
                  {{ item.total || 0 }}
                </div>
                人
                <div class="legend-item-right-per">
                  {{
                    item.total === 0
                      ? 0
                      : (
                          (item.total / totalCTZJ) *
                          100
                        ).toFixed(2)
                  }}
                </div>
                %
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="bottom-left-tabs">
          <tabItem
            v-for="(item, index) of projectConfig"
            :key="index"
            :config="item"
            :value="projectData[item.value]"
          />
        </div>
        <div class="bottom-left-items">
          <tabItem1
            v-for="(item, index) of projectDetailConfig"
            :key="index"
            :config="item"
            :detail="projectData"
          />
        </div>
        <div class="bottom-left-charts">
          <div class="title">各年度上会/签约项目</div>
          <div class="chart">
            <echartDiv :options="optionsXM" />
          </div>
        </div>
      </div>
      <div class="bottom-right">
        <div class="bottom-right-tabs">
          <tabItem
            v-for="(item, index) of unitConfig"
            :key="index"
            :config="item"
            :value="unitData[item.value]"
          />
        </div>
        <div class="bottom-right-charts">
          <div class="bottom-right-charts-item">
            <div class="title">合作单位事项排行</div>
            <div class="chart1">
              <div
                class="list-item"
                v-for="(item, index) of rankList"
                :key="index"
              >
                <div class="list-item-icon">
                  {{ index + 1 }}
                </div>
                <div class="list-item-content">
                  <div class="list-item-content-label">
                    {{ item.unitName }}
                  </div>
                  <div class="list-item-content-val">
                    <div class="list-item-content-val-num">
                      {{ item.itemCount || 0 }}
                    </div>
                    个
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom-right-charts-item">
            <div class="title">合作事项完成情况统计</div>
            <div class="bottom-right-charts-item-chart">
              <div
                class="bottom-right-charts-item-chart-main"
              >
                <echartDiv :options="optionsXMWC" />
              </div>
              <div
                class="bottom-right-charts-item-chart-legend"
              >
                <div
                  class="legend-item"
                  v-for="(item, index) of legendXMWC"
                  :key="index"
                >
                  <div class="legend-item-left">
                    <div
                      class="legend-item-left-circle"
                      :style="{
                        backgroundColor:
                          legendColorXMWC[index]
                      }"
                    ></div>
                    <div class="legend-item-left-label">
                      {{ item.status }}
                    </div>
                  </div>
                  <div class="legend-item-right">
                    <div class="legend-item-right-num">
                      {{ item.total || 0 }}
                    </div>
                    个
                    <div class="legend-item-right-per">
                      {{
                        item.total === 0
                          ? 0
                          : (
                              (item.total / totalXMWC) *
                              100
                            ).toFixed(2)
                      }}
                    </div>
                    %
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartDiv from '@/components/echart/index'
import tabItem from './tabItem.vue'
import tabItem1 from './tabItem1.vue'
import {
  queryExpert,
  queryProject,
  queryUnit
} from '@/api/innovationOverview'
export default {
  components: {
    echartDiv,
    tabItem,
    tabItem1
  },
  data() {
    return {
      // 配置
      // 专家
      exportTotal: 0,
      // 项目
      projectConfig: [
        {
          label: '项目总数',
          value: 'xmzs',
          unit: '个',
          icon: require('@/assets/img/overview/kc-left-icon1.png')
        },
        {
          label: '项目总投资额',
          value: 'xmztze',
          unit: '万元',
          icon: require('@/assets/img/overview/kc-left-icon2.png')
        }
      ],
      projectDetailConfig: [
        {
          name: '未上会',
          bg: 'linear-gradient(165deg, #F8BD70, #E2A85B)',
          detail: [
            {
              label: '项目数',
              value: 'wshxms',
              unit: '个'
            },
            {
              label: '投资总额',
              value: 'wshtzze',
              unit: '万元'
            }
          ]
        },
        {
          name: '已上会',
          bg: 'linear-gradient(165deg, #58A2EF, #4782C2)',
          detail: [
            {
              label: '项目数',
              value: 'yshxms',
              unit: '个'
            },
            {
              label: '投资总额',
              value: 'yshtzze',
              unit: '万元'
            }
          ]
        },
        {
          name: '已签约',
          bg: 'linear-gradient(165deg, #38CC93, #0DAD91)',
          detail: [
            {
              label: '项目数',
              value: 'yqyxms',
              unit: '个'
            },
            {
              label: '投资总额',
              value: 'yqytzze',
              unit: '万元'
            }
          ]
        }
      ],
      projectData: {
        xmzs: 0,
        xmztze: 0,
        wshxms: 0,
        wshtzze: 0,
        yshxms: 0,
        yshtzze: 0,
        yqyxms: 0,
        yqytzze: 0
      },
      // 单位
      unitConfig: [
        {
          label: '合作单位',
          value: 'unitTotal',
          unit: '个',
          icon: require('@/assets/img/overview/kc-left-icon3.png'),
          bg: '#54B3F1'
        },
        {
          label: '合作事项总数',
          value: 'itemTotal',
          unit: '个',
          icon: require('@/assets/img/overview/kc-left-icon4.png'),
          bg: '#54B3F1'
        }
      ],
      unitData: {
        unitTotal: 0,
        itemTotal: 0
      },
      rankList: [],

      // 图表
      // 专家类型
      optionsZJLX: {},
      legendZJLX: [],
      totalZJLX: 0,
      legendColorZJLX: [
        '#28CDFF',
        '#698FEF',
        '#22CED6',
        '#0190C6'
      ],
      // 技术专家
      optionsJSZJ: {},
      legendJSZJ: [],
      totalJSZJ: 0,
      legendColorJSZJ: ['#FFD08E', '#0190C6'],
      // 创投专家
      optionsCTZJ: {},
      legendCTZJ: [],
      totalCTZJ: 0,
      legendColorCTZJ: ['#22CED6', '#FB8585', '#698FEF'],
      // 项目
      optionsXM: {},
      // 项目完成情况
      optionsXMWC: {},
      legendXMWC: [],
      totalXMWC: 0,
      legendColorXMWC: ['#0190C6', '#698FEF', '#22CED6']
    }
  },
  mounted() {
    // 专家
    this.getStatisticsExpert()
    // 项目
    this.getStatisticsProject()
    // 单位
    this.getStatisticsUnit()
  },
  methods: {
    // 专家
    getStatisticsExpert() {
      queryExpert().then((res) => {
        if (res.success) {
          this.exportTotal = res.data.totalAll
          // 专家类型
          this.legendZJLX = res.data.talentsInfo
          // this.optionsZJLX = this.getChartDataZJLX(
          //   res.data.talentsInfo,
          //   this.legendColorZJLX
          // )
          res.data.talentsInfo.forEach((item) => {
            this.totalZJLX += item.total
          })
          this.optionsZJLX = this.getChartDataTop1(
            res.data.talentsInfo,
            this.legendColorZJLX
          )

          // 技术专家
          this.legendJSZJ = res.data.technologyInfo
          res.data.technologyInfo.forEach((item) => {
            this.totalJSZJ += item.total
          })
          this.optionsJSZJ = this.getChartDataTop(
            res.data.technologyInfo,
            this.legendColorJSZJ,
            res.data.technologyTotal
          )

          // 创投专家
          this.legendCTZJ = res.data.ventureInfo
          res.data.ventureInfo.forEach((item) => {
            this.totalCTZJ += item.total
          })
          this.optionsCTZJ = this.getChartDataTop(
            res.data.ventureInfo,
            this.legendColorCTZJ,
            res.data.ventureTotal
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 项目
    getStatisticsProject() {
      queryProject().then((res) => {
        if (res.success) {
          this.projectData = {
            xmzs: res.data.allTotal.countProject || 0,
            xmztze: res.data.allTotal.total || 0,
            wshxms: res.data.unMeetTotal.countProject || 0,
            wshtzze: res.data.unMeetTotal.total || 0,
            yshxms: res.data.meetTotal.countProject || 0,
            yshtzze: res.data.meetTotal.total || 0,
            yqyxms: res.data.signTotal.countProject || 0,
            yqytzze: res.data.signTotal.total || 0
          }
          // 项目
          this.optionsXM = this.getChartDataXM(
            res.data.yearTotal
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 单位
    getStatisticsUnit() {
      queryUnit().then((res) => {
        if (res.success) {
          this.unitData = {
            unitTotal: res.data.unitTotal || 0,
            itemTotal: res.data.itemTotal || 0
          }
          // 合作单位排行
          this.rankList = res.data.rankList
          // 项目完成情况
          this.legendXMWC = res.data.completeList
          res.data.completeList.forEach((item) => {
            this.totalXMWC += item.total
          })
          this.optionsXMWC = this.getChartDataXMWC(
            res.data.completeList,
            this.legendColorXMWC
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 专家类型
    getChartDataZJLX(data, color) {
      let option = {
        color: color,
        // grid: {
        //   top: '-10',
        //   bottom: '68%',
        //   left: '50%',
        //   containLabel: false
        // },
        legend: {
          show: false
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{a}<br>{b}：{c}人 ({d}%)'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: '#000',
                fontSize: 12
              },
              show: false
            },
            data: []
          }
        ],
        xAxis: [
          {
            show: false
          }
        ],
        series: []
      }

      let total = 0
      data.forEach((item) => {
        total += item.total
      })
      const seriesData = []
      const yAxisData = []
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        seriesData.push({
          name: '专家类型',
          type: 'pie',
          clockWise: false,
          hoverAnimation: false,
          radius: [100 - i * 18 + '%', 92 - i * 18 + '%'],
          center: ['50%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [
            {
              value: item.total || 0,
              name: item.type
            },
            {
              value: total - (item.total || 0),
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
        seriesData.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false,
          hoverAnimation: false,
          radius: [100 - i * 18 + '%', 92 - i * 18 + '%'],
          center: ['50%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [
            {
              value: 10,
              itemStyle: {
                color: '#E3F0FF',
                borderWidth: 0
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            },
            {
              value: 0,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
        yAxisData.push(
          ((item.total / total) * 100).toFixed(2) + '%'
        )
      }

      option.yAxis[0].data = yAxisData
      option.series = seriesData

      return option
    },
    getChartDataTop1(data, color, total) {
      let option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: false
        },
        tooltip: {
          show: true
        },
        title: {
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: ['72%', '85%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            z: 10,
            data: [],
            label: {
              show: false,
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: true
            },
            emphasis: {
              labelLine: {
                show: true
              }
            }
          },
          {
            type: 'pie',
            radius: ['60%', '72%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
      }
      const seriesData1 = []
      const seriesData2 = []
      for (let index = 0; index < data.length; ++index) {
        const item = data[index]
        seriesData1.push({
          value: item.total || 0,
          name: item.type,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          itemStyle: {
            color: color[index]
          }
        })
        seriesData2.push({
          value: item.total || 0,
          name: item.type,
          itemStyle: {
            color: color[index],
            opacity: 0.4
          }
        })
      }

      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      return option
    },
    // 技术专家、创投专家
    getChartDataTop(data, color, total) {
      let option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: false
        },
        tooltip: {
          show: true
        },
        title: {
          text: total,
          textStyle: {
            color: '#000000',
            fontSize: 18
          },

          subtext: '专家总数',
          subtextStyle: {
            color: '#3C3C3C',
            fontSize: 14
          },
          itemGap: 10,
          left: 'center',
          top: '40%'
        },
        series: [
          {
            type: 'pie',
            radius: ['47%', '55%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            z: 10,
            data: [],
            label: {
              show: false,
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: true
            },
            emphasis: {
              labelLine: {
                show: true
              }
            }
          },
          {
            type: 'pie',
            radius: ['41%', '47%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
      }
      const seriesData1 = []
      const seriesData2 = []
      for (let index = 0; index < data.length; ++index) {
        const item = data[index]
        seriesData1.push({
          value: item.total || 0,
          name: item.type,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          itemStyle: {
            color: color[index]
          }
        })
        seriesData2.push({
          value: item.total || 0,
          name: item.type,
          itemStyle: {
            color: color[index],
            opacity: 0.4
          }
        })
      }

      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      return option
    },
    // 各年度上会/签约项目
    getChartDataXM(data) {
      let option = {
        grid: {
          top: 60,
          bottom: 30,
          left: 50,
          right: 70
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          left: 'center',
          top: '0'
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              show: false,
              lineStyle: {
                color: '#497FA333'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#A7ADB5',
              fontSize: 12
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            name: '单位（个）',
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#A7ADB5',
              fontSize: 12
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#497FA333'
              }
            },
            nameTextStyle: {
              color: '#A7ADB5',
              fontSize: 12
            }
          },
          {
            name: '单位（万元）',
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#A7ADB5',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#497FA333'
              }
            },
            nameTextStyle: {
              color: '#A7ADB5',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: '已上会项目',
            type: 'bar',
            data: [],
            barWidth: '22',
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#419EDC'
                },
                {
                  offset: 1,
                  color: '#5AB9F8'
                }
              ]
            )
          },
          {
            name: '已签约项目',
            type: 'bar',
            barWidth: '22',
            data: [],
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#0DAD91'
                },
                {
                  offset: 1,
                  color: '#38CC93'
                }
              ]
            )
          },
          {
            name: '已上会投资额',
            type: 'line',
            yAxisIndex: 1,
            data: [],
            symbol: 'circle',
            symbolSize: 7,
            lineStyle: {
              color: '#4B9AEE',
              width: 2
            },
            itemStyle: {
              color: '#4B9AEE',
              borderWidth: 1,
              borderColor: '#ffffff'
            }
          },
          {
            name: '已签约投资额',
            type: 'line',
            yAxisIndex: 1,
            symbolSize: 7,
            data: [],
            symbol: 'circle',
            lineStyle: {
              color: '#38CC93',
              width: 2
            },
            itemStyle: {
              color: '#38CC93',
              borderWidth: 1,
              borderColor: '#ffffff'
            }
          }
        ]
      }
      const xAxisData = []
      const seriesData1 = []
      const seriesData2 = []
      const seriesData3 = []
      const seriesData4 = []
      data.forEach((item) => {
        xAxisData.push(item.year)
        seriesData1.push(
          item.meetYearTotal.countProject || 0
        )
        seriesData2.push(
          item.signYearTotal.countProject || 0
        )
        seriesData3.push(item.meetYearTotal.total || 0)
        seriesData4.push(item.signYearTotal.total || 0)
      })
      option.xAxis[0].data = xAxisData
      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      option.series[2].data = seriesData3
      option.series[3].data = seriesData4
      return option
    },
    // 项目完成情况统计
    getChartDataXMWC(data, color) {
      let option = {
        color: color,
        grid: {
          top: 50,
          bottom: 50,
          left: 50,
          right: 50
        },
        legend: {
          show: false
        },
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '100%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            roseType: 'area',
            itemStyle: {
              borderWidth: 5,
              borderType: 'solid',
              borderColor: '#fff'
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }

      const seriesData = []
      data.forEach((item) => {
        seriesData.push({
          name: item.status,
          value: item.total || 0
        })
      })
      option.series[0].data = seriesData

      return option
    }
  }
}
</script>

<style lang="scss">
.innovation-overview-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 18px 16px;
  .title {
    width: 100%;
    height: 54px;
    color: #4c565c;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    box-sizing: border-box;
    padding: 0 0 0 35px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    &::before {
      content: '';
      width: 4px;
      height: 16px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      position: absolute;
      top: calc(50% - 8px);
      left: 24px;
    }
  }
  .chart {
    width: 100%;
    flex: 1;
  }
  .legend-item {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    &-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-right: 10px;
      &-circle {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        margin-right: 6px;
      }
      &-label {
        font-size: 14px;
        line-height: 14px;
        font-weight: 400;
        color: #3c3c3c;
      }
    }
    &-right {
      font-size: 14px;
      line-height: 14px;
      font-weight: 400;
      color: #3c3c3c;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      &-num {
        font-size: 14px;
        line-height: 14px;
        font-family: DIN;
        font-weight: 500;
        color: #000000;
        margin: 0 4px 0px 14px;
      }
      &-per {
        font-size: 14px;
        line-height: 14px;
        font-family: DIN;
        font-weight: 400;
        color: #000000;
        margin: 0 4px 0px 14px;
      }
    }
  }
  .top {
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    height: 39.6%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    &-left {
      width: 30%;
      height: 100%;
      box-sizing: border-box;
      border-right: 1px solid #f1f1f1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &-tabs {
        height: 128px;
        width: 400px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: url('~@/assets/img/overview/kc-top-bg.png')
          no-repeat;
        background-size: 100% 100%;
        margin-bottom: 10px;
        &-left {
          width: 136px;
          height: 108px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url('~@/assets/img/overview/kc-top-bg1.png')
            no-repeat;
          background-size: 100% 100%;
          margin-right: 40px;
          &-icon {
            width: 60px;
            height: 60px;
            background: url('~@/assets/img/overview/kc-top-icon.png')
              no-repeat;
            background-size: 100% 100%;
          }
        }
        &-right {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          &-label {
            font-size: 16px;
            line-height: 16px;
            font-weight: 500;
            color: #3c3c3c;
            margin-bottom: 22px;
          }
          &-content {
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            font-size: 14px;
            line-height: 14px;
            font-weight: 500;
            color: #3c3c3c;
            &-num {
              font-size: 18px;
              line-height: 18px;
              font-family: DIN;
              font-weight: bold;
              color: #3c3c3c;
              margin: 0 5px -2px 0;
            }
          }
        }
      }
      &-charts {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center !important;
        &-legend {
          width: 220px;
          margin-left: 25px;
        }
      }
    }
    &-middle {
      width: 35%;
      height: 100%;
      box-sizing: border-box;
      border-right: 1px solid #f1f1f1;
      display: flex;
      flex-direction: column;
    }
    &-right {
      width: 35%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    .chart {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      &-main {
        width: calc(100% - 300px);
        height: 100%;
      }
      &-main1 {
        width: 168px;
        height: 168px;
      }
      &-legend {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 58.48%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    &-left {
      width: calc(50% - 8px);
      height: 100%;
      background-color: #fff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      &-tabs {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      &-items {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-bottom: 1px solid #f1f1f1;
        box-sizing: border-box;
        padding: 10px 0 15px 0;
      }
      &-charts {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        .title {
          height: 34px;
          border-bottom: none;
        }
      }
    }
    &-right {
      width: calc(50% - 8px);
      height: 100%;
      background-color: #fff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      &-tabs {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-bottom: 1px solid #f1f1f1;
        box-sizing: border-box;
        padding-bottom: 10px;
      }
      &-charts {
        width: 100%;
        height: calc(100% - 131px);
        display: flex;
        &-item {
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .title {
            height: 34px;
            border-bottom: none;
            margin-top: 5px;
          }
          &-chart {
            width: 100%;
            height: calc(100% - 34px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            &-main {
              width: 100%;
              height: calc(100% - 82px);
            }
            &-legend {
              width: 230px;
              margin: 10px 0 20px 0;
            }
          }
          .chart1 {
            width: 100%;
            height: calc(100% - 34px);
            box-sizing: border-box;
            padding: 20px 0 20px 0;
            overflow-y: auto;
          }

          .list-item {
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            box-sizing: border-box;
            padding-left: 30px;
            margin-bottom: 20px;
            &-icon {
              width: 50px;
              height: 50px;
              margin-right: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 24px;
              font-family: DIN;
              font-weight: bold;
              background: url('~@/assets/img/overview/kc-right-rank4.png')
                no-repeat;
              background-size: 100% 100%;
              color: #a8bad2;
            }
            &-content {
              width: 231px;
              height: 56px;
              background: linear-gradient(
                165deg,
                #e9eff4,
                #ffffff
              );
              border: 3px solid #ffffff;
              box-shadow: 0px 2px 8px 0px
                rgba(1, 21, 60, 0.2);
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              padding: 0 17px;
              &-label {
                line-height: 14px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #4c565c;
              }
              &-val {
                line-height: 14px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #4c565c;
                display: flex;
                align-items: flex-end;
                justify-content: flex-start;
                &-num {
                  line-height: 18px;
                  font-size: 18px;
                  font-family: DIN;
                  color: #000000;
                  margin: 0 2px -2px 0;
                }
              }
            }
            &:first-child {
              .list-item-icon {
                background: url('~@/assets/img/overview/kc-right-rank1.png')
                  no-repeat;
                background-size: 100% 100%;
                color: #ffffff;
              }
            }
            &:nth-child(2) {
              .list-item-icon {
                background: url('~@/assets/img/overview/kc-right-rank2.png')
                  no-repeat;
                background-size: 100% 100%;
                color: #ffffff;
              }
            }
            &:nth-child(3) {
              .list-item-icon {
                background: url('~@/assets/img/overview/kc-right-rank3.png')
                  no-repeat;
                background-size: 100% 100%;
                color: #ffffff;
              }
            }
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}
</style>
